<template>
  <footer class="bilibili-footer">
    <div class="footer-container">
      <!-- 顶部链接区域 - 两行布局 -->
      <div class="footer-links">
        <!-- 第一行：关于我们 -->
        <div class="links-row">
          <div class="links-column">
            <h4>关于我们</h4>
            <ul>
              <li v-for="(link, index) in aboutLinks" :key="'about-' + index">
                <a :href="link.url">{{ link.text }}</a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 第二行：传送门 -->
        <div class="links-row">
          <div class="links-column">
            <h4>传送门</h4>
            <ul>
              <li v-for="(link, index) in portalLinks" :key="'portal-' + index">
                <a :href="link.url">{{ link.text }}</a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 右侧联系方式 (带图标) -->
        <div class="contact-column">
          <h4>联系我们</h4>
          <ul>
            <li v-for="(item, index) in contactItems" :key="'contact-' + index">
              <a :href="item.url">
                <span class="icon" :class="item.icon"></span>
                {{ item.text }}
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 版权信息区域 -->
      <div class="copyright">
        <div class="legal-info">
          <p v-for="(line, index) in legalInfo" :key="'legal-' + index">{{ line }}</p>
        </div>

        <div class="partner">
          <h5>合作机构</h5>
          <p v-for="(partner, index) in partners" :key="'partner-' + index">{{ partner }}</p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
// 关于我们链接
const aboutLinks = [
  { text: '关于我们', url: '#' },
  { text: '联系我们', url: '#' },
  { text: '用户协议', url: '#' },
  { text: '加入我们', url: '#' },
  { text: '友情链接', url: '#' },
  { text: '隐私协议', url: '#' },
  { text: 'bilibili认证', url: '#' },
  { text: 'Investor Relations', url: '#' }
]

// 传送门链接
const portalLinks = [
  { text: '协议汇总', url: '#' },
  { text: '活动中心', url: '#' },
  { text: '活动专题页', url: '#' },
  { text: '侵权申诉', url: '#' },
  { text: '帮助中心', url: '#' },
  { text: '社区中心', url: '#' },
  { text: '壁纸站', url: '#' },
  { text: '广告合作', url: '#' },
  { text: '名人堂', url: '#' },
  { text: 'MCN管理中心', url: '#' },
  { text: '高级弹幕', url: '#' },
  { text: '品牌号官网', url: '#' }
]

// 联系方式 (带图标)
const contactItems = [
  { text: '下载APP', url: '#', icon: 'icon-download' },
  { text: '公益', url: '#', icon: 'icon-heart' },
  { text: '官方微博', url: '#', icon: 'icon-weibo' },
  { text: '官方微信', url: '#', icon: 'icon-wechat' }
]

// 法律信息
const legalInfo = [
  '营业执照 | 信息网络传播视听节目许可证: Q910417 | 网络文化经营许可证沪网文【2022】1848-115号 | 广播电视节目制作经营许可证: (沪) 字第01248号 | 增值电信业务经营许可证沪B2-20100043',
  '互联网ICP备案: 沪ICP备13002172号-3 | 出版物经营许可证沪批字第U6699号 | 互联网药品信息服务资格证沪-非经营性-2022-0011 | 营业性演出许可证沪市文(经) 00-22531',
  '不良信息举报邮箱: help@bilibili.com | 涉未成年人举报邮箱: teenprotect@bilibili.com | 不良信息举报电话: 400828223463 | 上海互联网举报中心 | 12345政务服务便民热线',
  '网上有害信息举报专区: ● 中国互联网违法和不良信息举报中心 | 尊敬的市民朋友，上海警方反诈劝阻电话96110 | 专司针对盗版假冒等侵权诈骗犯罪举报，请您一旦收到来电，立即接听。',
  '公司名称: 上海宽娱数码科技有限公司 | 公司地址: 上海市杨浦区政立路489号 | 电话: 021-25098888'
]

// 合作伙伴
const partners = [
  '上海东方传媒集团有限公司'
]
</script>

<style scoped lang="scss">
.bilibili-footer {
  background-color: #f6f9fa;
  color: #666;
  font-size: 12px;
  padding: 40px 0;
  border-top: 1px solid #e5e9ef;
  line-height: 1.5;

  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr auto; // 三列布局
    gap: 40px;
    margin-bottom: 30px;

    .links-row {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .links-column, .contact-column {
      h4 {
        font-size: 14px;
        margin-bottom: 15px;
        color: #222;
        font-weight: 500;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px 20px;

        li {
          a {
            color: #666;
            text-decoration: none;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;

            &:hover {
              color: #00a1d6;
            }
          }
        }
      }
    }

    .contact-column {
      ul {
        display: flex;
        flex-direction: column;
        gap: 12px;

        li a {
          .icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;

            &.icon-download {
              background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
            }
            &.icon-heart {
              background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
            }
            &.icon-weibo {
              background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>');
            }
            &.icon-wechat {
              background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M9.5 4C5.36 4 2 6.69 2 10c0 1.89 1.29 3.56 3.28 4.62L4.5 16l2.5-1.23c.79.22 1.63.35 2.5.35 4.14 0 7.5-2.69 7.5-6s-3.36-6-7.5-6zm0 9c-.62 0-1.22-.08-1.79-.22L5.8 12.4c.29.1.6.16.92.16.55 0 1.07-.12 1.54-.32.03-.01.06-.02.09-.02.2-.06.39-.13.57-.21.03-.01.06-.03.09-.04.18-.08.35-.17.51-.27.03-.02.06-.04.09-.06.16-.1.31-.21.45-.32.02-.02.05-.04.07-.06.13-.11.25-.22.36-.34.02-.02.04-.05.06-.07.1-.12.2-.25.29-.38.01-.02.03-.04.04-.06.09-.13.17-.27.24-.41.01-.02.02-.05.03-.07.07-.14.13-.29.18-.44.01-.03.02-.06.03-.09.05-.15.09-.31.12-.47.01-.03.01-.06.02-.09.03-.16.05-.33.06-.5 0-.03 0-.06.01-.09.01-.17.01-.34.01-.51 0-.17 0-.34-.01-.51 0-.03 0-.06-.01-.09-.01-.17-.03-.34-.06-.5-.01-.03-.01-.06-.02-.09-.03-.16-.07-.32-.12-.47-.01-.03-.02-.06-.03-.09-.05-.15-.11-.3-.18-.44-.01-.02-.02-.05-.03-.07-.07-.14-.15-.28-.24-.41-.01-.02-.03-.04-.04-.06-.09-.13-.19-.26-.29-.38-.02-.02-.04-.05-.06-.07-.11-.12-.23-.23-.36-.34-.02-.02-.05-.04-.07-.06-.14-.11-.29-.22-.45-.32-.03-.02-.06-.04-.09-.06-.16-.1-.33-.19-.51-.27-.03-.01-.06-.03-.09-.04-.18-.08-.37-.15-.57-.21-.03-.01-.06-.02-.09-.02C7.87 4.12 8.39 4 8.94 4c.32 0 .63.06.92.16l1.91-.62C10.72 4.08 10.12 4 9.5 4z"/></svg>');
            }
          }
        }
      }
    }
  }

  .copyright {
    border-top: 1px solid #e5e9ef;
    padding-top: 20px;

    .legal-info {
      p {
        margin: 8px 0;
      }
    }

    .partner {
      margin-top: 20px;

      h5 {
        font-size: 14px;
        margin-bottom: 8px;
        color: #222;
        font-weight: 500;
      }

      p {
        margin: 4px 0;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 30px 0;

    .footer-links {
      grid-template-columns: 1fr;
      gap: 30px;

      .contact-column {
        ul {
          flex-direction: row;
          flex-wrap: wrap;
        }
      }
    }
  }
}
</style>
